import React from 'react';
import { Link } from 'react-router-dom';
import PageTitle from 'component/page-title/PageTitle.jsx';
import ProductService from 'service/ProductService.jsx';
const productService = new ProductService();
import MUtil from 'util/MUtil.jsx';
const mUtil = new MUtil();
import TableList from 'util/TableList.jsx';

class ProductCategory extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      parentCategoryId: this.props.match.params.parentCategoryId || 0,
    }
  }
  componentDidMount() {
    this.loadCategoryList();
  }

  /**
   * 可以用于再次跳入该组件
   */
  componentDidUpdate(preProps, preState) {
    let oldPath = preProps.location.pathname,
      newPath = this.props.location.pathname,
      newId = this.props.match.params.categoryId || 0;
    if (oldPath !== newPath) {
      this.setState({ parentCategoryId: newId }
        , () => this.loadCategoryList());
    }
  }
  /**
   * 修改品类名称
   * @param {品类ID} categoryId 
   * @param {品类名称} categoryName 
   */
  onUpdateName(categoryId, categoryName) {
    let newName = prompt('请输入新的品类名称', categoryName);
    if (newName) {
      productService.updateCategoryName({ categoryId, categoryName: newName })
        .then(res => {
          mUtil.successTips(res.data);
          this.loadCategoryList();
        }
          , errMsg => mUtil.errorTips(errMsg));
    }
  }

  /**
   * 加载品类列表
   */
  loadCategoryList() {
    productService
      .getCategoryList(this.state.parentCategoryId)
      .then(res => {
        this.setState({ list: res.data });
      }, errMsg => {
        this.setState({
          list: []
        });
        mUtil.errorTips(errMsg);
      });
  }
  render() {

    return (
      <div id="page-wrapper">
        <PageTitle title="品类列表" >
          <div className="page-header-right">
            <Link to="/product-category/add" className="btn btn-primary">
              <i className="fa fa-plus"></i>
              <span>添加品类</span>
            </Link>
          </div>
        </PageTitle>
        <div className="row">
          <div className="col-md-12">
            <p>父品类ID：{this.state.parentCategoryId}</p>
          </div>
        </div>
        <TableList tableHeads={[
          { name: '品类ID', width: '30%' },
          { name: '品类名称', width: '40%' },
          { name: '操作', width: '30%' }
        ]}>
          {
            this.state.list.map((category, index) => {
              return (
                <tr key={index}>
                  <td>{category.id}</td>
                  <td>{category.name}</td>
                  <td>
                    <a className="operate" onClick={() => this.onUpdateName(category.id, category.name)}>修改名称</a>
                    {
                      category.parentId === 0 ?
                        <Link to={`/product-category/index/${category.id}`}>查看子品类</Link>
                        : null
                    }
                  </td>
                </tr>
              );
            })
          }
        </TableList>
      </div>
    );
  }
}

export default ProductCategory;